import React from 'react'
import { NavBar, Form, Button, Radio, Space, Modal } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import axios from 'axios'

export default function Iphone() {
    const navigate = useNavigate()
    const back = () => {
        navigate(-1)
    }
    const [flag, setflag] = React.useState(true)
    let [time, settime] = React.useState(60)
    // const setCode = () => {
    //     const Captcha = '1234567890'
    //     let code = ''
    //     for (let i = 0; i < 6; i++) {
    //         code += Captcha.charAt(Math.floor(Math.random() * Captcha.length))
    //     }
    //     return code
    // }
    const getCode = async () => {
        setflag(false)
        let timer = setInterval(async () => {
            settime(--time)
            if (time === 55) {
                let res = await axios.get(`http://localhost:3000/code`, { params: { iphone: value } })
            }
            if (time == 0) {
                clearInterval(timer)
                settime(60)
                setflag(true)
            }
        }, 1000)
    }
    const [value, setValue] = React.useState('')
    const [value_1, setValue_1] = React.useState('')
    const bind = async () => {
        let res = await axios.post(`http://localhost:3000/bind`, { phone: value, codes: value_1 })
        console.log(res);
        if (res.data.code === 200) {
            Modal.alert({
                content: '成功',
                closeOnMaskClick: true,
            })
            setTimeout(() => {
                navigate('/renzheng')
            }, 2000)
        }
    }
    return (
        <div>
            <NavBar onBack={back}></NavBar>
            <div>
                <h2 style={{ textAlign: 'center' }}>绑定手机号</h2>
                <p style={{ textAlign: 'center', color: 'rgb(153,153,153)', marginTop: '10px' }}>未绑定的手机号登录成功后将自动注册</p>
            </div>
            <div style={{ marginTop: '100px' }}>
                <Form layout='horizontal'>
                    <Form.Item label=''>
                        <input placeholder='请输入手机号' value={value} onChange={(e) => setValue(e.target.value)} style={{ border: 'none', width: '250px', height: '40px', fontSize: '18px' }} />
                    </Form.Item>
                    <Form.Item label=''>
                        <input placeholder='请输入验证码' value={value_1} onChange={(e) => setValue_1(e.target.value)} style={{ border: 'none', width: '250px', height: '40px', fontSize: '18px' }} />
                        {
                            flag ? <span style={{ position: 'absolute', right: '15px', top: '20px' }} onClick={getCode}>获取验证码</span> : <span style={{ position: 'absolute', right: '15px', top: '20px', color: 'rgb(153,153,153)' }}>{time}秒后重新获取</span>
                        }
                    </Form.Item>
                </Form>
                <Button color='primary' fill='outline' onClick={bind} style={{ width: '250px', height: '50px', borderRadius: '30px', background: 'rgb(36,200,116)', color: 'white', marginTop: '50px', marginLeft: '65px' }}>
                    绑定并登录
                </Button>
                <Space direction='vertical' style={{ 'marginTop': '30px', marginLeft: '35px' }}>
                    <Radio style={{ '--icon-size': '15px' }}><span style={{ fontSize: '15px' }}>我已阅读并同意签署 用户协议 和 隐私政策</span></Radio>
                </Space>
            </div>
        </div>
    )
}
